<template>
  <section v-loading="loading">
    <sel-com-dep v-on:get="getListBtn"></sel-com-dep>
    <el-button size="mini" type="primary"  icon="el-icon-plus" @click="addDefineDialogBtn" v-if="currDepartment"/>
    <el-table :data="defineList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" prop="title" width="155px"/>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.couponType === 1">满减</span>
          <span v-if="scope.row.couponType === 2">折扣</span>
        </template>
      </el-table-column>
      <el-table-column label="获取方式">
        <template slot-scope="scope">
          <span v-if="scope.row.way === 0">只送</span>
          <span v-if="scope.row.way === 1">只领</span>
          <span v-if="scope.row.way === 2">可送可领</span>
        </template>
      </el-table-column>
      <el-table-column label="起止时间" min-width="290px">
        <template slot-scope="scope">
          {{formatDatetime(scope.row.start)}} ~ {{formatDatetime(scope.row.end)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button size="mini" @click='sendCouponBtn(scope.row)' type="success">发送</el-button>
          <el-button size="mini" @click="editBtn(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="editDefineDialog" :title="(currDefine && currDefine.id)?'编辑':'新建'" width="60%" v-if="editDefineDialog">
      <new-define :define="currDefine" v-on:closeDialog="getCouponDefineList" :department="currDepartment"></new-define>
    </el-dialog>
    <el-dialog :visible.sync="editDialog" :title="currDefine.name" v-if="currDefine">
      <el-form label-width="120px" size="mini">
        <el-form-item label="ID：">{{currDefine.id}} couponDefineId</el-form-item>
        <el-form-item label="名称：">
          <el-input size="mini" v-model="currDefine.title"></el-input>
        </el-form-item>
        <el-form-item label="选择送达账户：">
          <el-select v-model="currDefine.memberIds"  :filterable="true" remote :reserve-keyword="false" size="mini" multiple
                     default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod">
            <el-option v-for="(member,index) in memberList" :key="index" :label="member.userName" :value="member.id" v-if="memberList">
              <span style="float: left">{{ member.userName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ member.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="confirmSendBtn(currDefine)" type="success">确认发送</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import newDefine from './newDefine'
  import selComDep from '../selComDep'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "define",
    components: {newDefine, selComDep},
    data() {
      return {
        loading:false,
        editDefineDialog:false,
        editDialog:false,
        currDefine:null,
        defineList:null,
        totalPage:0,
        currDepartment:null,
        memberList:null,
      }
    },
    created(){
    },
    watch:{
    },
    computed:{
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatDatetime(date){
        console.log(date)
        return dateFormater.formatDatetime(date)
      },
      getListBtn(e){
        console.log(e)
        this.currDepartment=e
        this.getCouponDefineList()
        this.loading=true
      },
      goPage(val){
        this.getCouponDefineList(val-1)
      },
      getCouponDefineList(pageNo){
        this.fetch({name:"getCouponDefineList",data:{page:pageNo?pageNo:0,departmentId:this.currDepartment.id}})
          .then(res=>{
            console.log(res)
            this.defineList=res.content
            this.totalPage=res.totalPages
            this.loading=false
            this.editDefineDialog=false
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addDefineDialogBtn(){
        this.currDefine=null
        this.editDefineDialog=true
      },
      editBtn(row){
        console.log(row)
        this.currDefine=row
        this.editDefineDialog=true
      },
      deleteBtn(id){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteCouponDefine",data:{id}})
              .then(res=>{
                console.log(res)
                this.getCouponDefineList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      sendCouponBtn(row){
        console.log(row)
        this.editDialog=true
        this.currDefine=row
      },
      remoteMethod(keywords) {
        clearTimeout()
        setTimeout(()=>{
          this.fetch({name:"getMembers",data:{keywords}})
            .then(res=>{
              console.log('账户列表',res)
              this.memberList=res.content
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })},1000)
      },
      confirmSendBtn(currDefine){
        console.log(currDefine)
        let data = {
          couponDefineId:currDefine.id,
          name:currDefine.title,
          memberIds:JSON.stringify({memberIds:currDefine.memberIds})
        }
        this.sendCoupon(data)
      },
      sendCoupon(data){
        this.fetch({name:"sendCoupon",data:{...data}})
          .then(res=>{
            this.getCouponDefineList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
